<template>
  <div data-v-sharp123 class="sharp">
    <div class="main">
      <div
        class="swiper-video"
        id="swiper-video"
        ref="swiper-video"
        :style="{ transform: 'translateY(' + videoSwiperValue + '%)' }"
      >
        <div
          v-for="(item, index) in videoList"
          :key="index"
          :ref="'video-inner-index' + index"
          class="video-inner"
        >
          <div
            :data-video-index="index"
            class="video-box"
            :style="{ width: videoWidth }"
            @wheel.capture.stop="swiperVideo"
          >
            <div class="video-bg">
              <img :src="item.cover" alt="" />
            </div>
            <!-- @click.capture.stop="playOrPause" -->
            <!-- <video
              :data-video-index="index"
              class="video-contain"
              :id="'video' + index"
              loop
              controls
            >
              <source
                :src="'http://127.0.0.1:3000/' + item.video"
                type="video/mp4"
              />
              您的浏览器不支持 HTML5 video 标签。
            </video> -->

            <videoControls
              :data-video-index="index"
              class="video-contain"
              :id="'video' + index"
              :ref="'video' + index"
              :videoItem="item"
              :videoIndex="index"
            ></videoControls>

            <!-- 评论条 -->
            <div class="vetical-bar">
              <section class="owner">
                <img
                  :src="item.user_pic"
                  alt=""
                  @click="toHomePage(item.video_issuer)"
                />
              </section>
              <section class="like">
                <i
                  :data-count="item.likes_count"
                  class="iconfont icon-good-fill"
                  :class="{ isSelect: isLikes }"
                  @click="setLikesStatus(item)"
                ></i>
              </section>
              <section class="comment">
                <i
                  :data-count="item.comment_count"
                  class="iconfont icon-comments-fill"
                  @click.stop="openComment(item)"
                ></i>
              </section>
              <section class="collection">
                <i
                  :data-count="item.collection_count"
                  class="iconfont icon-collection-fill"
                  :class="{ isCollSelect: isCollection }"
                  @click="openDialog(item)"
                ></i>
              </section>
              <section class="reprint">
                <i class="iconfont icon-resonserate-fill"></i>
              </section>
              <!-- <section class="more"><i class="iconfont icon-dian"></i></section> -->
            </div>
          </div>

          <!-- 评论区 -->
          <div class="comment-box" v-if="isCommentClose">
            <div class="comment-header">
              <span>全部评论</span
              ><span
                class="el-icon-close"
                @click="closeComment"
                style="cursor: pointer"
              ></span>
            </div>
            <div class="comment-contain" @click.stop="cancelInput">
              <div class="comment-list">
                <section
                  v-for="item in comments"
                  :key="item.id"
                  class="comment-item"
                >
                  <div class="comment-item-left">
                    <img :src="item.user_pic" alt="" />
                  </div>

                  <div class="comment-item-right">
                    <div class="comment-item-right-top">
                      <span>{{ item.username }}</span>
                    </div>
                    <div class="comment-item-right-content">
                      <p style="white-space: pre-line">{{ item.comment }}</p>
                    </div>
                    <div class="comment-item-right-bottom">
                      <i class="iconfont">{{ item.comment_date }}</i>
                      <i
                        class="iconfont"
                        ref="currentreplybtn"
                        @click.stop="getSendInput(item, $event)"
                        >回复</i
                      >
                      <i @click="openJubao(item)" class="iconfont">举报</i>
                    </div>

                    <ul class="children-comment">
                      <li
                        v-for="childrenItem in item.children"
                        :key="childrenItem.id"
                        class="children-comment-list"
                      >
                        <div class="children-comment-list-left">
                          <img :src="childrenItem.user_pic" alt="" />
                        </div>
                        <div class="children-comment-list-right">
                          <div class="children-comment-list-right-top">
                            <span>{{ childrenItem.username }}</span>
                            <span>@{{ childrenItem.reply_username }}:</span>
                          </div>
                          <div class="children-comment-list-right-content">
                            <p style="white-space: pre-line">
                              {{ childrenItem.comment }}
                            </p>
                          </div>
                          <div class="children-comment-list-right-bottom">
                            <i class="iconfont">{{
                              childrenItem.comment_date
                            }}</i>
                            <i
                              class="iconfont"
                              ref="currentreplybtn"
                              @click.stop="getSendInput(childrenItem, $event)"
                              >回复</i
                            >
                            <i @click="openJubao(childrenItem)" class="iconfont"
                              >举报</i
                            >
                          </div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </section>
              </div>
            </div>

            <div class="comment-input">
              <el-input
                class="send-input"
                type="textarea"
                :placeholder="placeholderValue"
                v-model="replyContent.textarea"
                resize="none"
              >
              </el-input>

              <el-button class="input-btn" @click="sendComment">发送</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      :visible.sync="centerDialogVisible"
      width="25%"
      center
      :before-close="handleClose"
    >
      <span slot="title" class="dialog-title"> 添加到收藏夹 </span>
      <el-checkbox-group class="checkbox-group" v-model="checkList">
        <el-checkbox
          v-for="item in collectionFolder"
          :key="item.id"
          :label="item.id"
          class="checkbox-group-item"
          >{{ item.name }}</el-checkbox
        >
      </el-checkbox-group>
      <el-input placeholder="请输入内容" v-model="inputFolder">
        <span slot="append" @click="addFolder">新建</span>
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="setCollection">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      class="commentDialogVisible"
      title="请选择举报理由"
      :visible.sync="commentDialogVisible"
      width="30%"
      center
    >
      <div class="radio-item">
        <span class="title">违法法律法规</span>
        <el-radio-group class="radio-box" v-model="radio">
          <el-radio label="违法违规">违法违规</el-radio>
          <el-radio label="色情">色情</el-radio>
          <el-radio label="低俗">低俗</el-radio>
          <el-radio label="赌博诈骗">赌博诈骗</el-radio>
        </el-radio-group>
      </div>
      <div class="radio-item">
        <span class="title">侵犯个人权益</span>
        <el-radio-group class="radio-box" v-model="radio">
          <el-radio label="人身攻击">人身攻击</el-radio>
          <el-radio label="侵犯隐私">侵犯隐私</el-radio>
        </el-radio-group>
      </div>
      <div class="radio-item">
        <span class="title">有害社区环境</span>
        <el-radio-group class="radio-box" v-model="radio">
          <el-radio label="垃圾广告">垃圾广告</el-radio>
          <el-radio label="引战">引战</el-radio>
          <el-radio label="青少年不良信息">青少年不良信息</el-radio>
        </el-radio-group>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="commentDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendComplaint">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import debounce from "@/debounce.js";
import videoControls from "@/components/videoControls";

export default {
  name: "Sharp",
  data: function () {
    return {
      isCommentClose: false,
      videoWidth: "100%",
      videoSwiperValue: 0,
      counts: 0,
      ctrlDown: false,

      currentVideoId: 0,

      isPlaying: false,

      newVideoList: [], // 新生成的视频列表

      videoList: [], // 视频渲染列表
      comments: [], // 评论列表

      userinfo: {},

      // 发送内容
      placeholderValue: "请输入内容",

      replyContent: {
        textarea: "",
        parentId: -1,
        replyUser: -1,
        videoId: "",
      },

      // 点赞收藏
      isCollection: false,
      isLikes: false,

      collectionFolder: [],
      checkList: [],
      oldCheckList: [],

      centerDialogVisible: false,
      inputFolder: "",

      commentDialogVisible: false,
      radio: "",

      currentComplaintItem: {},
    };
  },

  components: {
    videoControls,
  },

  mounted() {
    this.getVideo();

    this.$getuserinfo((data) => {
      // console.log(data);
      this.userinfo = data;
    });
  },

  methods: {
    // 关闭评论区
    closeComment() {
      this.isCommentClose = false;
      this.videoWidth = "100%";
    },

    // 打开评论区
    openComment(item) {
      if (this.isCommentClose) {
        return this.closeComment();
      }
      // console.log(item);
      this.replyContent.videoId = item.id;

      this.isCommentClose = true;
      this.videoWidth = "72%";
    },

    // 切换视频
    swiperVideo: debounce(function (event) {
      // event.wheelDelta 大于0 鼠标上滑，小于0下滑
      // 禁止在缩放时切换视频
      if (event.ctrlKey) {
        return;
      }

      let last_active_video = event.target;
      // let last_video_paused = last_active_video.paused; // 保存上一个视频的播放状态
      // console.log(last_video_paused);
      // console.log(last_active_video.paused);

      let last_video_index = last_active_video.getAttribute("data-video-index");

      let active_video = this.$refs[`video${last_video_index - 0 + 1}`][0];

      // console.log(last_active_video.volume);
      // active_video.volume = last_active_video.volume;

      if (event.wheelDelta > 0) {
        if (this.videoSwiperValue == 0) return;
        this.videoSwiperValue += 100;
        active_video = this.$refs[`video${last_video_index - 1}`][0];
      } else {
        // 鼠标下滑操作
        if (
          Math.abs(parseInt(this.videoSwiperValue / 100)) ===
          this.$refs["swiper-video"].childNodes.length
        )
          return;

        if (
          this.$refs["swiper-video"].childNodes.length - last_video_index <=
          3
        ) {
          this.getVideo();
        }

        this.videoSwiperValue -= 100;
      }

      last_active_video.pause();
      active_video.player.load();
      active_video.player.play();

      // console.log(active_video._props.videoItem.id);
      this.replyContent.videoId = active_video._props.videoItem.id;
      this.currentVideoId = active_video._props.videoItem.id;
      this.getComments(this.currentVideoId);
      this.getLikesStatus(this.currentVideoId);
      this.getCollectionStatus(this.currentVideoId);
    }, 600),

    // 播放暂停视频
    playOrPause(event) {
      // console.log(event.target);
      const video_index = event.currentTarget.getAttribute("data-video-index");
      const active_video = document.getElementById(`video${video_index}`);

      if (active_video.paused) {
        active_video.play();
        this.isPlaying = true;
      } else {
        active_video.pause();
        this.isPlaying = false;
      }
    },

    // 获取视频
    getVideo() {
      this.axios
        .get("/recommend/video")
        .then((response) => {
          if (response.data.status === 200) {
            this.newVideoList = response.data.data;

            // console.log(response.data);

            this.newVideoList.forEach((item, index) => {
              this.videoList.push(item);
            });

            if (this.counts === 0) {
              this.counts++;
              this.currentVideoId = response.data.data[0].id;
              this.getLikesStatus(response.data.data[0].id);
              this.getCollectionStatus(response.data.data[0].id);
              this.getComments(response.data.data[0].id);
            }
            // console.log(this.videoList);
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 获取评论
    getComments(id) {
      // console.log(id);
      this.axios
        .get(`/comments/${id}`)
        .then((response) => {
          if (response.data.status === 200) {
            // console.log(response.data);
            this.comments = response.data.data;
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    openJubao(item) {
      // console.log(item);
      // this.commentDialogVisible = true;
      // this.currentComplaintItem = item;
    },

    getSendInput(item, e) {
      // console.log(item, e.target);

      // console.log(this.$refs.currentreplybtn);
      for (let i = 0; i < this.$refs.currentreplybtn.length; i++) {
        this.$refs.currentreplybtn[i].style.color = "#757575";
      }

      e.target.style.color = "red";

      this.replyContent.parentId = item.id;
      this.replyContent.replyUser = item.user;
      this.placeholderValue = `@${item.username}`;

      // console.log(this.replyContent);
    },

    cancelInput() {
      this.placeholderValue = "请输入内容";
      this.replyContent = {
        textarea: "",
        parentId: -1,
        replyUser: -1,
        videoId: this.replyContent.videoId,
      };

      for (let i = 0; i < this.$refs.currentreplybtn.length; i++) {
        this.$refs.currentreplybtn[i].style.color = "#757575";
      }
    },

    sendComment() {
      // console.log(this.replyContent);

      if (!this.replyContent.textarea) {
        return this.$message({
          message: "发送内容不能为空",
          type: "warning",
        });
      }

      let now = new Date();

      this.axios
        .post(`/sendcomment`, {
          video_id: this.replyContent.videoId,
          parent_id: this.replyContent.parentId,
          reply_user: this.replyContent.replyUser,
          comment: this.replyContent.textarea,
          comment_date: now,
        })
        .then((response) => {
          if (response.data.status === 200) {
            // console.log(response.data);
            this.comments = response.data.data;
            this.replyContent.textarea = "";
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 点赞，收藏
    getCollectionStatus(id) {
      this.checkList = [];
      // console.log(id);
      this.axios
        .get(`/getCollectionStatus/${id}`)
        .then((response) => {
          if (response.data.status === 200) {
            // console.log(response.data);
            if (response.data.data.length !== 0) {
              this.isCollection = true;
              let arr = response.data.data;
              arr.forEach((item) => {
                this.checkList.push(item.folder_id);
              });
            } else {
              this.isCollection = false;
            }
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getLikesStatus(id) {
      this.axios
        .get(`/getLikesStatus/${id}`)
        .then((response) => {
          if (response.data.status === 200) {
            // console.log(response.data);
            this.isLikes = response.data.data;
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    setLikesStatus(item) {
      // console.log(item);

      if (this.isLikes) {
        this.isLikes = false;

        this.axios
          .get(`/deleteLikes/${item.id}`)
          .then((response) => {
            if (response.data.status === 200) {
              // console.log(response.data);
              item.likes_count--;
              this.$notify({
                title: "成功",
                message: "取消点赞",
                type: "success",
              });
            } else {
              console.log(response);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.isLikes = true;
        this.likesCount++;

        this.axios
          .get(`/addLikes/${item.id}`)
          .then((response) => {
            if (response.data.status === 200) {
              // console.log(response.data);
              item.likes_count++;

              this.$notify({
                title: "成功",
                message: "点赞成功",
                type: "success",
              });
            } else {
              console.log(response);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },

    // 获取收藏夹
    getCollectionFolder() {
      this.axios
        .get(`getCollectionFolder/${-1}`)
        .then((response) => {
          if (response.data.status == 200) {
            this.collectionFolder = response.data.data;
            // console.log(response.data);
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    addCollectionFolder() {
      this.axios
        .post(`addCollectionFolder`, {
          folderName: this.inputFolder,
        })
        .then((response) => {
          if (response.data.status == 200) {
            // console.log(response.data);
            this.collectionFolder.push(response.data.data);
            this.inputFolder = "";
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    addFolder() {
      if (this.inputFolder == "") {
        return console.log("不能为空");
      }

      this.addCollectionFolder();
    },

    // 取消/点击收藏
    setCollection() {
      this.centerDialogVisible = false;

      this.axios
        .get(`/deleteCollection/${this.currentVideoId}`)
        .then((response) => {
          if (response.data.status === 200) {
            // console.log(response.data);

            if (this.checkList[0]) {
              this.axios
                .post(`/addCollection/${this.currentVideoId}`, {
                  checkList: this.checkList,
                })
                .then((response) => {
                  if (response.data.status === 200) {
                    // console.log(response.data);
                    this.$notify({
                      title: "成功",
                      message: "收藏成功",
                      type: "success",
                    });
                  } else {
                    console.log(response);
                  }
                })
                .catch((err) => {
                  console.log(err);
                });
            } else {
              this.$notify({
                title: "成功",
                message: "取消收藏",
                type: "success",
              });
            }
            this.getCollectionStatus(this.currentVideoId);
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    handleClose(done) {
      // this.getCollectionStatus(this.currentVideoId);
      done();
    },

    openDialog(item) {
      // console.log(item);
      this.getCollectionStatus(item.id);
      // 获取收藏夹
      this.getCollectionFolder();
      this.centerDialogVisible = true;
      // this.oldCheckList = this.checkList;
    },

    openJubao(item) {
      // console.log(item);
      this.commentDialogVisible = true;
      this.currentComplaintItem = item;
    },

    sendComplaint() {
      let video_id = this.currentComplaintItem.video_id;
      let comment_id = this.currentComplaintItem.id;
      let violator = this.currentComplaintItem.user;
      let why = this.radio;

      // console.log(video_id, comment_id, violator, why);

      if (this.radio === "") {
        return this.$message.error("请选择举报理由！");
      }

      this.axios
        .post(`complaint`, {
          video_id,
          comment_id,
          violator,
          why,
        })
        .then((response) => {
          if (response.data.status == 200) {
            // console.log(response.data);
            this.commentDialogVisible = false;
            this.$message.warning(response.data.msg);
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    toHomePage(id) {
      const res = this.$router.resolve(`/homepage/${id}`);
      window.open(res.href, "_blank");
    },
  },
};
</script>

<style lang="scss" scoped>
.sharp[data-v-sharp123] {
  width: 100%;
  height: 100%;
  padding: 15px 20px;

  .isSelect {
    color: red !important;
  }

  .isCollSelect {
    color: orange;
  }

  .main {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;

    .swiper-video {
      width: 100%;
      height: 100%;

      transition: all 0.2s linear;
      -webkit-transition: all 0.2s linear; /* Safari */

      // scroll-snap-type: y mandatory;
      // overflow: scroll;
      // background-color: hotpink;

      .video-inner {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        border-radius: 12px;
        // scroll-snap-align: start;

        .video-box {
          position: relative;
          width: 72%;
          height: 100%;
          // background-color: rgb(34, 32, 32);
          border-radius: 12px;
          cursor: pointer;

          // transition: all 0.1s linear;
          // -webkit-transition: all 0.1s linear; /* Safari */

          .video-bg {
            position: fixed;
            left: 0;
            width: inherit;
            height: inherit;
            z-index: -9999;
            border-radius: 12px;

            img {
              width: 100%;
              height: inherit;
              border-radius: 12px;
              filter: blur(50px);
              -webkit-filter: blur(50px);
            }
          }

          .video-contain {
            width: 100%;
            height: 100%;

            // background-color: #000;
            border-radius: 12px;
          }

          .vetical-bar {
            display: flex;
            flex-direction: column;
            // align-items: center;
            position: absolute;
            right: 10px;
            bottom: 40px;
            padding: 5px 10px;

            section {
              margin-bottom: 10px;
              width: 50px;
              font-size: 20px;
              color: #fff;
              text-align: center;

              i {
                display: block;
                width: 100%;
                position: relative;
                font-size: 30px;
                cursor: pointer;
              }
            }

            .owner {
              img {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                cursor: pointer;
              }
            }

            .like {
              // margin-bottom: 32px;
              height: 50px;

              i::after {
                content: attr(data-count);
                width: 100%;
                font-size: 16px;
                color: #fff;
                position: absolute;
                left: 0;
                top: 32px;
              }
            }
          }

          .controls {
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 2px 10px;

            .video-bar {
              width: 100%;
              height: 3px;
              background-color: #a3a2a1;
            }

            .button-group {
              display: flex;
              align-items: center;
              position: relative;
              width: 100%;
              height: 40px;
              text-align: center;

              i {
                font-size: 18px;
                font-style: normal;
                color: #fff;
              }

              .left-group {
                display: flex;
                align-items: center;
                position: absolute;
                left: 3px;

                .play-pause-btn {
                  width: 25px;
                  height: 25px;
                  line-height: 25px;
                  cursor: pointer;
                }
              }

              .right-group {
                display: flex;
                align-items: center;
                position: absolute;
                right: 3px;

                .speed,
                .volume,
                .fullscreen,
                .details {
                  margin: 0 8px;
                  width: 25px;
                  height: 25px;
                  line-height: 25px;
                  cursor: pointer;
                }

                .speed {
                  width: 50px;
                }

                .fullscreen {
                  font-size: 25px;
                }

                .details {
                  width: 80px;
                  margin-left: 10px;
                }
              }
            }
          }
        }

        .comment-box {
          width: 28%;
          height: 100%;
          background-color: #fff;
          border-radius: 12px;

          .comment-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 7%;
            padding: 0 16px;
            font-size: 18px;
            // color: #fff;
            // background-color: rgb(32, 31, 31);
            border-bottom: 1px solid #eee;
            border-radius: 0 12px 0 0;
          }

          .comment-contain {
            width: 100%;
            height: 83%;
            background-color: #eee;
            overflow: auto;

            &::-webkit-scrollbar {
              display: none;
            }

            .comment-list {
              width: 100%;
              min-height: 200px;
              padding: 15px 10px;

              .comment-item {
                display: flex;
                justify-content: space-around;
                width: 100%;
                padding: 10px 0;

                .comment-item-left {
                  margin-right: 10px;

                  img {
                    display: inline-block;
                    width: 50px;
                    height: 50px;
                    object-fit: cover;
                    border-radius: 50%;
                  }
                }

                .comment-item-right {
                  width: 92%;
                  padding-bottom: 15px;
                  border-bottom: 1px solid #dcdfe6;

                  .comment-item-right-top {
                    span:nth-child(1) {
                      font-size: 16px;
                      color: rgb(251, 114, 153);
                      padding-right: 10px;
                    }

                    span:nth-child(2) {
                      font-size: 15px;
                      color: #757575;
                    }
                  }

                  .comment-item-right-content {
                    padding: 10px 0;
                  }

                  .comment-item-right-bottom {
                    position: relative;

                    i {
                      font-size: 15px;
                      color: #757575;
                      cursor: pointer;
                    }

                    i:nth-child(1) {
                      padding-right: 20px;
                    }

                    i:nth-child(3) {
                      position: absolute;
                      right: 20px;
                    }

                    i::before {
                      margin-right: 5px;
                    }
                  }

                  .children-comment {
                    width: 100%;

                    .children-comment-list {
                      display: flex;
                      justify-content: space-around;
                      width: 100%;
                      padding: 10px 0;

                      .children-comment-list-left {
                        margin-right: 10px;

                        img {
                          display: inline-block;
                          width: 40px;
                          height: 40px;
                          object-fit: cover;
                          border-radius: 50%;
                        }
                      }

                      .children-comment-list-right {
                        width: 93%;
                        // padding-bottom: 15px;
                        // border-bottom: 1px solid #dcdfe6;

                        .children-comment-list-right-top {
                          span:nth-child(1) {
                            font-size: 16px;
                            color: rgb(251, 114, 153);
                            padding-right: 6px;
                          }

                          span:nth-child(2) {
                            font-size: 14px;
                            color: #00a1d6;
                          }
                        }

                        .children-comment-list-right-content {
                          padding: 10px 0;
                          font-size: 16px;

                          p {
                            i {
                              margin-right: 5px;
                              font-style: normal;
                              color: #00a1d6;
                            }
                          }
                        }

                        .children-comment-list-right-bottom {
                          position: relative;

                          i {
                            font-size: 13px;
                            color: #757575;
                            cursor: pointer;
                          }

                          i:nth-child(1) {
                            padding-right: 20px;
                          }

                          i:nth-child(3) {
                            position: absolute;
                            right: 20px;
                          }

                          i::before {
                            margin-right: 5px;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }

          .comment-input {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 10%;
            padding: 5px 10px;

            .input-btn {
              margin-left: 10px;
            }
          }
        }
      }
    }
  }
}
</style>